<template>
  <div class="home">
    <div class="container">
      <header>
        <div class="search fl">
          <input type="image" src="images/ss.jpg" />
          <input type="text" name="search" placeholder="搜索附近的房源" />
        </div>
        <img class="fr" src="images/top.jpg" />
        <div class="clear"></div>
      </header>
      <section class="banner">
        <swiper :options="swiperOption" v-if="adList2.length">
          <swiper-slide v-for="(val,key) in adList2" :key="key">
            <a href="#">
              <img :src="val.imgPath" />
            </a>
          </swiper-slide>

          <!-- 分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </section>
      <section class="content">
        <h1>新房源</h1>
        <ul class="c">
          <li>
            区域
            <span class="icon">&#xe6aa;</span>
          </li>
          <li>
            租金
            <span class="icon">&#xe6aa;</span>
          </li>
          <li>
            户型
            <span class="icon">&#xe6aa;</span>
          </li>
          <li>
            筛选
            <span class="icon">&#xe6aa;</span>
          </li>
        </ul>
        <ul class="case">
          <li v-for="(val) in newHouse" :key="val.hid">
            <router-link :to="{name:'detail',params:{hid:val.hid,type:'new'}}">
              <a href="javascript:;">
                <img :src="val.cover" class="fl" />
                <div class="text fr">
                  <h1>{{val.name}}</h1>
                  <p>{{val.desc}}</p>
                  <ul>
                    <li
                      v-for="(v,k) in val.tag"
                      :key="k"
                      :class="v.status==='active'?'active':''"
                    >{{v.name}}</li>
                  </ul>
                  <p>
                    {{val.rentMoney}}
                    <span>元/月</span>
                  </p>
                </div>
              </a>
            </router-link>
          </li>
          <!-- <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
          </li>-->
        </ul>
        <p
          style="text-align:center; margin-bottom:1.2rem; font-size:0.2rem"
          @click="getMore"
        >{{loadMore}}</p>
      </section>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from "axios";

// 默认输出组件对象（只输出一次）
export default {
  name: "home",
  data() {
    return {
      //定义变量
      swiperOption: {
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true, //是否自动轮播
        pagination: {
          el: ".swiper-pagination", //轮播图中下标点显示
        },
        paginationClickable: true, //轮播图中下标点显示
      },
      //广告图数据
      adList2: [],
      loadMore: "加载更多....",
      pn: 1, //页码
    };
  },
  //加载子组件（页面分离的内容）
  components: {},
  //生命周期
  mounted() {
    let _this = this;
    //组件渲染前执行
    axios({
      methods: "get",
      url: "/data/ad_data.json",
    })
      .then(function (res) {
        //请求成功
        let data = res.data;
        //给data的变量赋值
        if (data.code == 200) {
          _this.adList2 = data.home_ad;
        }
      })
      .catch((error) => {
        //错误（网络中断、请求地址有问题）
        console.log(error);
      });

    this.$store.dispatch("getnewHouse", this.pn);
  },
  created() {},
  updated() {},
  destroyed() {},
  methods: {
    //事件函数（用方法格式）
    getMore() {
      //做分页，加载列表更多数据（去调用中间件的getHouse方法）
      let arr = this.$store.state.home.newHouse;
      let total = this.$store.state.home.newTotal;
      if (arr.length >= total) {
        return; // 阻止执行
      }

      this.$store.dispatch("getnewHouse", ++this.pn);
    },
  },
  computed: {
    //计算属性（定义变量，跟data不一样，可以对变量的值进行更多的赋值操作）
    newHouse() {
      //定义newHouse变量
      // let arr = this.$store.state.index.bestHouse;
      return this.$store.state.home.newHouse;
    },
  },
  watch: {
    //监听变量的改变（会可以自动更新变量的值）
    newHouse() {
      let arr = this.$store.state.home.newHouse;
      let total = this.$store.state.home.newTotal;
      if (arr.length >= total) {
        this.loadMore = "我是底线";
      }
    },
  },
};
</script>

<style scoped lang="less" rel="stylesheet/less">
// @import url("../assets/css/base.css");
// @import url("../assets/css/home.css");
header {
  height: 0.7rem;
  margin: 0.35rem 0.25rem 0;
  font-size: 0.28rem;
}

header .search {
  width: 82%;
  height: 0.7rem;
  background-color: #f7f7f7;
  position: relative;
}

header .search input[type="image"] {
  margin-left: 0.33rem;
  margin-top: 0.23rem;
  width: 0.24rem;
  height: 0.24rem;
}

header .search input[type="text"] {
  background-color: #f7f7f7;
  border: none;
}

header > img {
  width: 0.38rem;
  height: 0.38rem;
  margin-top: 0.13rem;
}

.navtop ul {
  display: flex;
  justify-content: space-around;
  margin: 0.42px 0;
}

.navtop ul li {
  /*width: 1rem;*/
  width: 25%;
  height: 1.1rem;
  text-align: center;
}

.navtop ul li a {
  width: 100%;
  height: 100%;
  display: block;
}

.navtop ul li img {
  width: 0.46rem;
  height: 0.46rem;
  display: block;
  margin: 0 auto;
}

.navtop ul li p {
  color: #5e5e5e;
  font-size: 0.28rem;
  margin-top: 0.18rem;
}

.content {
  margin: 0 0.24rem 1.6rem;
}

.content > h1 {
  font-size: 0.48rem;
  // margin: .45rem 0;
}
</style>
